<template>
  <div class="freemusic">

    <!-- <aplayer autoplay :music="musicL[0]" :list="musicL">
      </aplayer> -->
    <div class="img" v-for="item in data.myList" target="_blank" :key="item.musicId"
      >
      <a target="_blank" @click="obtain(item.musicId, item.picUrl, item.musicName, item.author)">
        <img :src=item.picUrl alt="图片文本描述" width="300" height="200">
      </a>
     
      <div class="desc">{{ item.musicName }} <a class="del" href="#" @click="test(item.musicId)">删除</a></div>
     
    </div>
    

  </div>
</template>

<script>
// import aplayer from "vue-aplayer";
import { data } from "@/play/data.js";
import { mets } from "@/play/play"
export default {
  name: "AplayerTest",
  components: {
    //别忘了引入组件
    // aplayer: aplayer
  },
  data() {
    return {
      data
    }
  },
  methods: {
    obtain: function (musicId, picUrl, musicName, author) {
      console.log(musicId)
      mets.playMusic(musicId)
      data.musicUrl = mets.musicUrl
      data.picUrl = picUrl
      data.musicId = musicId
      data.musicName = musicName
      data.author = author

    },
    test(id){
      var index=data.myList.findIndex(item=>item.musicId===id)
      console.log(index)
      console.log(id)
      data.myList.splice(index,1)
      data.num--;
    }

  }
};

</script>


<style>
.freemusic {
    overflow: auto;
    width: 100%;
    height: 100%;
}


</style>

